<template>
  <view class="contanier" v-if="figure">
    <nav-bar :title="figure.title"></nav-bar>
    <view class="title">{{figure.title}}</view>
    <view class="message" v-if="figure">作者：{{figure.authName}} |
      时间：{{figure.createTime | formatDate( 'yyyy年MM月dd日')}}</view>
    <view class="content">
      <u-parse :content="article" :imageProp="{
        mode:'widthFix'
      }"></u-parse>
    </view>
  </view>
</template>

<script>
  import uParse from "@/components/u-parse/u-parse.vue";
  import {
    marked
  } from "marked";
  import {
    carouselFigureDetailApi
  } from '@/api/used/used.js'
  export default {
    data() {
      return {
        article: '',
        figure: null,
      
      };
    },
    components: {
      uParse,
    },
    onLoad(e) {
      this.getcarouselFigureDetailApi(e.id)
    },
    onShareAppMessage() {},
    onShareTimeline() {},
    methods: {
      async getcarouselFigureDetailApi(id) {
        uni.showLoading({
          title: '加载中',
          mask: true
        });
        const {
          data: res
        } = await carouselFigureDetailApi(id)
        if (res.success) {
          let figure = res.data.figure[0]
          this.figure = figure;
          // this.article = marked(figure.content)
          const content = figure.content;
          this.article = content;
        }
        setTimeout(() => {
          uni.hideLoading();
        }, 800);
      },

    },
  };
</script>

<style lang="scss">
  @import url("@/components/u-parse/u-parse.css");

  .contanier {
    min-height: 100vh;
    background-color: #fff;

    .title {
      padding: 16rpx 0;
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      line-height: 60rpx;
    }

    .message {
      color: #6c6c6c;
      font-size: 28rpx;
      text-align: center;
      padding: 16rpx 0;
    }

    .content {
      padding: 16rpx 32rpx;
      font-size: 36rpx;
    }
  }
</style>